<template>
    <div class="imgNavDetail">
        <p class="header_detail">图片导航</p>
        <div class="detail">
            <p class="detail_explain_title">设置背景图</p>
            <p class="detail_explain">  · 不设置则为白底；</p>   
            <p class="detail_explain">· 添加图片，建议图片尺寸为750*200像素</p>
        </div>
        <div class="uploadImg">
            <div class="delete" @click='clearImg' v-if='data.bgUrl'></div>
            <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="getBg"
                :on-remove="handleRemove"
                :http-request="uploadImg"
            >
                <img v-if="data.bgUrl" :src="data.bgUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="img_loading">
                    <p v-if='!data.bgUrl'>添加图片</p> 
                </div>
            </el-upload>
        </div>
        <div class="detail">
           <p class="form_title">导航数量</p>
            <!-- <el-radio-group v-model="data.number" @change='changeNavList'>
                <el-radio :label="4">4个</el-radio>
                <el-radio :label="3">3个</el-radio>
                <el-radio :label="2">2个</el-radio>
            </el-radio-group> -->
            <div class="nav_box">
                <ul>
                    <li v-for='(item,index) in navList' :class="{'activeLi':activeNav==index}" :key='index' @click='changeNavList(index,item.number)'>
                        <img :src="activeNav==index ? item.activeIcon:item.icon">
                    </li>
                </ul>
            </div>
            <p class="detail_explain"> 建议图片尺寸{{activeNav==0 ? '172*172':activeNav==1?'230*172':'344*172'}}像素，要求一组内的图片尺寸比例必须一致；</p>   
        </div>
        <div class="detail_content">
            <ul>
                <li v-for='(item,index) in imgList' :key='index'>
                    <div class="imgBox">
                        <div class="left">
                            <div class="left_btns">
                                <p class="top_btn" :class="{'noClick':index==0}" @click='goUpStep(index,true)'>
                                    <img v-if='index==0'  src="@/assets/img/editContent/icon-pic-up-not.png" alt="">
                                    <img v-else src="@/assets/img/editContent/icon-pic-up-nor.png" alt="">
                                </p>
                                <p @click='goUpStep(index,false)' :class="{'noClick':index==imgList.length-1}">
                                    <img v-if='index==imgList.length-1' src="@/assets/img/editContent/icon-pic-down-not.png" alt="">
                                    <img v-else src="@/assets/img/editContent/icon-pic-down-nor.png" alt="">
                                </p>
                            </div>
                            <div class="left_imgs" @click='getIndex(index)'>
                                <el-upload
                                    class="avatar-uploader"
                                    action='#'
                                    :auto-upload="false"
                                    :show-file-list="false"
                                    :on-change='getImg'
                                    :on-remove="handleRemove"
                                    :http-request="uploadImg"
                                >
                                    <img v-if="imgList[index].imageUrl" :src="imgList[index].imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"><span class="upload_text">添加图片</span></i>
                                    <div class="img_loading" v-if='imgList[index].imageUrl'>
                                        <p>更换图片</p> 
                                    </div>
                                </el-upload>
                            </div>
                        </div>
                        <div class="jumpUrlBox">
                            <p>
                                <span>微信小程序链接（选填）</span>   
                                <c-linkselect v-model="imgList[index].wxJumpUrl"  @change="toParent"></c-linkselect >

                                <!-- <el-input @change='toParent' v-model='imgList[index].wxJumpUrl'></el-input> -->
                            </p>
                        </div>
                            <!-- 删除不需要 -->
                        <!-- <div class="right" @click='deleteRow(index)'></div> -->
                    </div>
                </li>
            </ul>
        </div>
        <div class="detail detail_set">
            <p class="form_title">上边框距离  <span>(0为贴合，最大100像素)</span></p>
            <el-slider
                v-model="data.paddingTop"
                show-input
                :max='100'
                :step="1"
                @change='toParent'>
            </el-slider>
            <p class="form_title">下边框距离  <span>(0为贴合，最大100像素)</span></p>
            <el-slider
                v-model="data.paddingBottom"
                show-input
                :max='100'
                :step="1"
                @change='toParent'>
            </el-slider>
            <p class="form_title">布局内图片间隙  <span>(0为贴合，最大100像素)</span></p>
            <el-slider
                v-model="data.spaceSize"
                show-input
                :max='100'
                :step="1"
                @change='toParent'>
            </el-slider>
        </div>
        <div  class="eventBus" >
            <p class="event_title" >事件（选填）</p>
            <el-input @change='toParent' v-model='data.event' :disabled="data.eventChecked" placeholder="请输入事件ID"></el-input>
        </div>
    </div>
</template>
<script>
import { uploadImg } from 'api/upload'
export default {
    data() {
        return {
            data: {
                number:4,
            },
            imgList:[{id:1},{id:2},{id:3},{id:4}],
            activeUploadIndex:0,
            activeNav:0,
            navList:[
                {
                    number:4,
                    icon:require('@/assets/img/editContent/nav-icon-type-04-nor.png'),
                    activeIcon:require('@/assets/img/editContent/nav-icon-type-04-sel.png')
                },
                {
                    number:3,
                    icon:require('@/assets/img/editContent/nav-icon-type-03-nor.png'),
                    activeIcon:require('@/assets/img/editContent/nav-icon-type-03-sel.png')
                },
                 {
                    number:2,
                    icon:require('@/assets/img/editContent/nav-icon-type-02-nor.png'),
                    activeIcon:require('@/assets/img/editContent/nav-icon-type-02-sel.png')
                },
            ],
            ModelList:[],
            activeIndex:null,  // 当前选中的index 元素
        };
    },
    props: {
        propData: {
            type: Object
        },
        totalList:{
            type:Array
        },
    },
    methods: {
        showDialog(index){
            if(!this.imgList[index].dialogUrl){
                return ;
            }
            let data  = {
                url:this.imgList[index].dialogUrl
            }
            this.$emit('showDialog',data)
        },
        changeActiveIndex(index){
            this.activeIndex  = index;
        },
        changeToJump(index,type){
            if(type==1){ //跳转链接
                this.data.imgList[index].jumpID = '';
            }else if(type ==2){  //模块跳转
                this.data.imgList[index].jumpUrl = '';
                this.data.imgList[index].wxJumpUrl = ''
            }else{
                this.data.imgList[index].jumpID = '';
                this.data.imgList[index].jumpUrl = '';
                this.data.imgList[index].wxJumpUrl = ''
            }
            this.toParent();
        },
        clearImg(){
            this.data.bgUrl = '';
            this.toParent();
        },
        clearItemImg(index){
            this.imgList[index].dialogUrl = '';
            this.toParent();
        },
        // 导航 数量
        changeNavList(index,val){
            this.activeNav =index;
            this.imgList=[];
            for(let i=0;i<val;i++){
                this.imgList.push(
                    {
                        id:i+1,
                        jumpUrl:'',
                        imageUrl:''
                    }
                )
            };
            if(index==2){
                this.data.spaceSize = 24;
            }else{
                this.data.spaceSize =19;
            }
            this.toParent();
        },
        uploadImg(){

        },
        handleRemove(){

        },
         // 获取当前点击的upload
        getIndex(index){
            if(this.activeUploadIndex ==index){
                return;
            }
            this.activeUploadIndex = index;
        },
        // 背景图
        getBg(val){
            let that = this;
            let infoId = this.$route.query.id;
            var file = val.raw;
            var formdata=new FormData();// 创建form对象
            formdata.append('file',file,file.name);
            uploadImg(formdata).then(res=>{
                if(res){
                    that.data.bgUrl=res;
                    that.toParent();
                }
            })
        },
        getImg(val){
            let that = this;
            let infoId = this.$route.query.id;
            var file = val.raw;
            var formdata=new FormData();// 创建form对象
            formdata.append('file',file,file.name);
            uploadImg(formdata).then(res=>{
                if(res){
                    var image = new Image()
                    image.src = res;
                    that.imgList[that.activeUploadIndex].imageUrl=res;
                    image.onload =function(){
                        var naturalWidth = image.width;
                        var naturalHeight = image.height;
                        if(naturalHeight < naturalWidth){
                            that.imgList[that.activeUploadIndex].overHight = true;
                        }else{
                            that.imgList[that.activeUploadIndex].overHight = false;
                        }
                        that.toParent();
                    }
                }
            })
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        
        goUpStep(index,bool){  //向上 ，向下 bool:true-上 false:下
            let index1,index2;
            if(bool){ //向上
                if(index==0){
                return ;
                }
                index1 = index;
                index2 =  index1-1;
            }else{ //向下
                if(index ==this.imgList.length-1){
                return;
                }
                index1 = index;
                index2 = index1+1;
            }
            this.imgList.splice(index2,1,...this.imgList.splice(index1, 1 , this.imgList[index2]));
            this.toParent();
        },
        // 删除 
        deleteRow(index){
            this.imgList.splice(index,1)
        },
        // 添加 
        addRow(){
            if(this.imgList.length==5){
                return; 
            }
            this.imgList.push({
                id:this.imgList.length+1
            });
        },
        toParent() {
            let data = {
                ...this.data,
                imgList:this.imgList
            };
            this.$emit("toParent", data);
        }
    },
    watch: {
        propData: function(val) {
            this.data = JSON.parse(JSON.stringify(this.propData));
        }
    },
    mounted() {
        this.data = JSON.parse(JSON.stringify(this.propData));
        this.imgList  = this.data.imgList;
     
        this.activeNav = this.imgList ? Math.abs(this.imgList.length-4) : 0;
        let arr = []; 
        this.totalList.map((val)=>{
            if(val.type!='BottomFloat' && val.type!='Floatwin'){
                arr.push(val);
            }
        });
        this.ModelList = arr.length &&  arr.map((val,index)=>{
            return {
                id:val.id,
                name:`${val.moduleName} - ${index+1}`
            }
        })
        this.toParent();
        console.log(this.propData, "接收到的参数");
    }
};
</script>
<style lang="less" scoped>
.imgNavDetail{
    margin-bottom:40px;
}
.header_detail{
    height:50px;
    line-height:50px;
    // border-bottom:1px solid #E4E4E4;
    font-size: 16px;
    color: #000000;
    padding-left:16px;
}
.detail{
    padding: 0 16px 0 16px;
    border-top: 1px solid #E4E4E4;
    font-size: 14px;
    // color: #666666;
    .nav_box{
        width:100%;
        height:40px;
        margin-bottom:10px;
        position:relative;
        ul{
            width:100%;
            height:100%;
            display:flex;
            justify-content: center;
            align-items: center;
            li{
                display:inline-block;
                width:100/3%;
                height:100%;
                position:relative;
                border:1px solid #E4E4E4;
                box-sizing: border-box;
                display:flex;
                justify-content: center;
                align-items: center;    
            }
            .activeLi{
               border:1px solid #FF8244; 
            }
        }
    }
    .form_title{
        position:relative;
        left:-10px;
        margin:20px 0 16px 0;
        span{
            color: #888888;
        }
    }
   
}
 .detail_explain_title{
    font-size: 14px;
    margin:10px 0;
    color: #666666;
}
.detail_explain{
    font-size: 12px;
    line-height: 17px;
    color: #888888;
}
.detail_set{
    padding: 16px 16px 0 25px;
}
.detail_content{
    width:100%;
    margin-bottom:10px;
    ul{
        width:100%;
        height:100%;
        margin-top: 20px;
    }
    li{
        width:100%;
        margin-top: 2px;
        background:#F7F7F7;
    }
    .el-form{
        padding:0 10px;
        padding-bottom:10px;
    }
    .imgBox{
        width:100%;
        height:100%;
        display:flex;
        justify-content: space-between;
        // align-items: center;
        position:relative;
        padding-top:10px;
        .jumpUrlBox{
            font-size:14px;
            line-height:24px;
            margin-right:16px;
            margin-top: 10px;
        }
        .left{
            width:150px;
            height:90px;
            display:flex;
            justify-content: center;
            align-items: center;
            .left_btns{
                width:50px;
                height:100%;
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center;
                p{
                    cursor: pointer;
                }
                .noClick{
                    cursor:not-allowed;
                }
                .top_btn{
                    margin-bottom:10px;
                }
            }
            .left_imgs{
                width:72px;
                height:62px;
                position:relative;
                .img_loading{
                    width:100%;
                    height:100%;
                    position:absolute;
                    background:rgba(0, 0, 0, 0.6);
                    top: 0;
                    font-size: 12px;
                    color: #FFFFFF;
                    display:none;
                    justify-content: center;
                    align-items:center;
                }
                .el-upload:hover .img_loading{
                    display:flex; 
                }   
                .upload_text{
                    font-size: 12px;
                    line-height: 17px;
                }
                /deep/ .avatar-uploader .el-upload {
                    border: 1px dashed #FF8244;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    
                }
                /deep/ .avatar-uploader .el-upload:hover {
                    // border-color: #FF8244;
                }
                /deep/.avatar-uploader-icon {
                    font-size: 22px;
                    color:#FF8244;
                    width:62px;
                    height:62px;
                    // line-height: 98px;
                    display:flex;
                    justify-content: center;
                    align-items:center;
                    flex-direction: column;
                }
                /deep/.avatar {
                    width:62px;
                    height:62px;
                    display: block;
                }
            }
        }
        .center{
            width:250px;
            height:100px;
        }
        .right{
            width:14px;
            height:14px;
            position:absolute;
            top: 8px;
            right:6px;
            background:url('~@/assets/img/editContent/icon-ashbin-nor.png') center center/14px 14px  no-repeat;
        }
        .right:hover{
            background:url('~@/assets/img/editContent/icon-ashbin-hov.png') center center/14px 14px  no-repeat;                    
        }
    }
    .addBtns{
        width:calc(100% - 32px);
        margin-left: 16px;
        text-align:center;
        line-height:40px;
        border:1px solid #FF8244;
        box-sizing: border-box;
        color:#FF8244;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom:20px;
        cursor: pointer;
    }
}
/deep/.el-form-item {
    height: auto;
    display: block;
}
/deep/.el-form-item__content{
    height:auto;
}
 .uploadImg{
        width:100%;
        height:132px;
        position:relative;
        padding:24px 16px 17px 16px;
        margin-top:16px;
        box-sizing: border-box;
        background:#F7F7F7;
        line-height:35px;
        font-size:14px;
        color:#666666;
        margin-bottom:20px;
        .delete{
            width:14px;
            height:14px;
            position:absolute;
            top: 8px;
            right:6px;
            z-index: 10;
            background:url('~@/assets/img/editContent/icon-ashbin-nor.png') center center/14px 14px  no-repeat;
        }
        .delete:hover{
            background:url('~@/assets/img/editContent/icon-ashbin-hov.png') center center/14px 14px  no-repeat;                    
        }
         /deep/ .avatar-uploader .el-upload {
            border: 1px dashed #FF8244;
            box-sizing: border-box;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width:100%;
            height:84px;     
            display:flex;
            justify-content: center;
            align-items:center;
            flex-direction: column;
            color:#FF8244;
        }
        /deep/ .avatar-uploader .el-upload:hover {
            // border-color: #FF8244;
        }
        /deep/.avatar-uploader-icon {
            font-size: 22px;  
            color:#FF8244;
        }
        /deep/.avatar {
            width:100%;
            height:84px;
            display: block;
        }
    }
    /deep/.el-slider__bar{
        background-color:#FF8244;
    }
    /deep/.el-slider__button{
        border: 2px solid #FF8244;
    }
    .el-form-item {
        margin: 10px 0 10px 0;
        height: auto;
        display: block;
    }
     .eventBus{
        font-size: 14px;
        padding:5px 16px 0 16px;
        line-height: 40px;
        .event_title{
        //    margin-bottom:10px;
        }
}
.uploadFormImg{
    padding:0 16px 0 16px;
    height:80px;
    .delete{
        top:0;
        right:0;
    }
}
</style>